<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>首页 - 书店</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- ① 购物车工具 + 弹框 -->
  <script type="module">
  // 购物车工具（纯本地）
  const CART_KEY = 'myCart';
  function getCart() { try { return JSON.parse(localStorage.getItem(CART_KEY)) || []; } catch { return []; } }
  function addCartItem(item) { const list = getCart(); list.push(item); localStorage.setItem(CART_KEY, JSON.stringify(list)); }

  // 唯一弹框函数（带图片参数）
  window.addCart = function (id, name, price, img) {
    addCartItem({ id, name, price, img: img || 'placeholder-封面', qty: 1 });
    alert('已加入购物车！');
    renderCart(); // 刷新主页可视化
  };

  // 读本地 + 渲染（不计算价格）
  function renderCart() {
    const list = getCart();
    const box = document.getElementById('cartView');
    if (!list.length) {
      box.innerHTML = '<div style="text-align:center;color:#666;">购物车是空的</div>';
      return;
    }
    box.innerHTML = list.map(item => `
      <div class="card" style="margin:10px 0;padding:10px;display:flex;align-items:center;gap:10px;">
        <img src="${item.img}" style="width:60px;height:90px;object-fit:cover;">
        <div>
          <div style="font-weight:bold;">${item.name}</div>
          <div style="color:#666;">单价：￥${item.price.toFixed(2)} | 数量：${item.qty}</div>
        </div>
      </div>
    `).join('');
  }

  // 首次加载
  renderCart();
</script>
</head>

<body>
  <!-- ② 整个 body 包起来让 Vue 能挂角标 -->
  <div id="header-app">
    <div class="navbar">
      <div class="floatLeft" style="display: inline-block;">
        <div style="line-height: 50px;color: #666;font-size: larger;display: inline-block;margin-right: 20px;margin-left:10px;">网上书城</div>
        <a href="category.html" class="select">书籍分类</a>
      </div>
      <div class="search floatRight">
        <input class="midinput" type="text" placeholder="请输入书名或作者">
        <button class="midbutton" onclick="location.href = 'search.html'">搜索</button>
        <!-- 只改这里：角标实时 -->
        <a href="cart.html" class="car">我的购物车</a>
        <a href="log.html" class="unlogin" id="userEntry">登录</a>
      </div>
    </div>

    <div class="banner">
      <img src="C:\Users\dante\Pictures\Screenshots\index1.jpg">
      <img src="C:\Users\dante\Pictures\Screenshots\index2.jpg">
      <img src="C:\Users\dante\Pictures\Screenshots\index3.jpg">
      <button style="left: 20%;top: 230px;" id="leftBtn">&lt;</button>
      <button style="right: 20%;top: 230px;" id="rightBtn">&gt;</button>
    </div>
    <br>
    <div class="quick-entry">
      <div class="item"><div class="icon">📚</div><h6>满 99 包邮</h6></div>
      <div class="item"><div class="icon">✅</div><h6>正品保证</h6></div>
      <div class="item"><div class="icon">↩️</div><h6>7 天退换</h6></div>
      <div class="item"><div class="icon">☎️</div><h6>全天客服</h6></div>
    </div>

    <h3 style="width: 50%;margin: 0px auto;">新书速递</h3>
    <div class="newBookrow">
      <div class="card">
        <a href="detial1.html"><img src="C:\Users\dante\Pictures\Screenshots\new1.webp" alt=""></a>
        <div class="card-body">
          <h6 class="card-title">了不起的盖茨比</h6>
          <p class="card-text">作者：菲茨杰拉德</p>
          <div class="card-footer-btn">
            <span class="price">￥32.8</span>
            <!-- 只改这里：onclick 调用 addCart -->
             
            <button class="btn-sm" onclick="addCart(1,'了不起的盖茨比',32.8,'C:\\Users\\dante\\Pictures\\Screenshots\\new1.webp')">加入购物车</button>
          </div>
        </div>
      </div>
      <div class="card">
        <a href="detial2.html"><img src="C:\Users\dante\Pictures\Screenshots\new2.webp" alt=""></a>
        <div class="card-body">
          <h6 class="card-title">红岩</h6>
          <p class="card-text">作者：罗广斌</p>
          <div class="card-footer-btn">
            <span class="price">￥59.0</span>
<button class="btn-sm" onclick="addCart(2,'红岩',59.0,'C:\\Users\\dante\\Pictures\\Screenshots\\new2.webp')">加入购物车</button>          </div>
        </div>
      </div>
      <div class="card">
        <a href="detial3.html"><img src="C:\Users\dante\Pictures\Screenshots\new3.webp" alt=""></a>
        <div class="card-body">
          <h6 class="card-title">茶花女</h6>
          <p class="card-text">作者：小仲马</p>
          <div class="card-footer-btn">
            <span class="price">￥35.0</span>
<button class="btn-sm" onclick="addCart(3,'茶花女',35.0,'C:\\Users\\dante\\Pictures\\Screenshots\\new3.webp')">加入购物车</button>          </div>
        </div>
      </div>
      <div class="card">
        <a href="detial4.html"><img src="C:\Users\dante\Pictures\Screenshots\new4.webp" alt=""></a>
        <div class="card-body">
          <h6 class="card-title">骆驼祥子</h6>
          <p class="card-text">作者：老舍</p>
          <div class="card-footer-btn">
            <span class="price">￥55.0</span>
<button class="btn-sm" onclick="addCart(4,'骆驼祥子',55.0,'C:\\Users\\dante\\Pictures\\Screenshots\\new4.webp')">加入购物车</button>          </div>
        </div>
      </div>
    </div>

    <footer>
      <div class="container">© 2025 网上书城 | <a href="help.html">帮助中心</a> | <a href="about.html">关于我们</a></div>
    </footer>
  </div><!-- /#header-app -->

  <!-- 你的原样式和脚本 -->
  <style>
    @import url("navT.css");
    @import url("comm.css");
    @import url("midSite.css");
  </style>
</body>
</html>
<script src="index.js"></script>